<template>
  <div class="icon-flot">
    <i
      v-if="store.styleInfo.styleType == 1"
      class="iconfonts"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        fontSize: '56px',
        color: store.styleInfo.shmentColor,
      }"
    >
      &#xe670;
    </i>
    <i
      v-if="store.styleInfo.styleType == 2"
      class="iconfonts"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        fontSize: '56px',
        color: store.styleInfo.shmentColor,
      }"
    >
      &#xe66f;
    </i>
    <i
      v-if="store.styleInfo.styleType == 3"
      class="iconfonts icon-position"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        fontSize: '66px',
        color: store.styleInfo.shmentColor,
      }"
    >
      &#xe64c;
    </i>
    <i
      v-if="store.styleInfo.styleType == 4"
      class="iconfonts"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        fontSize: '56px',
        color: store.styleInfo.shmentColor,
      }"
    >
      &#xe607;
    </i>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useProjectStore } from '@/store';

const store = useProjectStore();
</script>

<style lang="less" scoped>
.icon-flot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.icon-position) {
  line-height: 66px;
  margin-top: 15px;
}
.iconfonts {
  transition: 0.5s;
}
// .iconfonts:hover {
//   opacity: 0.8;
// }
</style>
